<template>
  <div class="plan01">
    <CrTitle>发布交通信息</CrTitle>
    <div class="form-box">
      <el-form :model="ruleForm" :rules="rules" ref="refRuleForm" label-width="0.6rem" class="demo-ruleForm">
        <el-form-item label="坐标" prop="position">
          <el-input :disabled="true" v-model="ruleForm.position" placeholder="请先获取位置信息">
            <template #append>
              <el-button icon="el-icon-map-location" @click="getUserPosition"></el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="ruleForm.type" placeholder="请选择活动区域">
            <el-option v-for="item in typeAll" :label="item.title" :key="item.value" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间" required>
          <el-date-picker
              v-model="ruleForm.time"
              type="datetime"
              placeholder="选择日期时间"
              :default-time="ruleForm.time">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input type="textarea" v-model="ruleForm.desc" placeholder="请填写描述"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">立即发布</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <div class="plan02">
    <div class="legend-box">
      <div class="legend">
        <span>畅通</span>
        <ul>
          <li style="background-color: #34b000;"></li>
          <li style="background-color: #fecb00;"></li>
          <li style="background-color: #df0100;"></li>
          <li style="background-color: #8e0e0b;"></li>
        </ul>
        <span>拥堵</span>
      </div>
    </div>
  </div>
  <el-dialog
      title="是否共享该交通信息"
      v-model="centerDialogVisible"
      width="30%"
      center>
    <span>{{ sharpUrl }}</span>
    <template #footer>
    <span class="dialog-footer">
      <el-button @click="centerDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="centerDialogVisible = false;sharpOkBtn()">共 享</el-button>
    </span>
    </template>

  </el-dialog>
</template>

<script setup lang="ts">
import CrTitle from "../../components/CrTitle.vue";
import TravelGuidInfoWindow from "../../components/InfoWindow/TravelGuidInfoWindow.vue"
import {onUnmounted, ref} from 'vue'
import {AMapUtil} from "../../utils/AMapUtil";
import {GlobalVariables} from "../../GlobalVariables";
import {ElMessage} from 'element-plus'
import {JsUtil} from "../../utils/JsUtil";
const typeAll:any = ref([
  {
    title:"交通事故",
    value:0,
    icon:"交",
    color:"#fef0f0"
  },
  {
    title:"积水",
    value:1,
    icon:"水",
    color:"#5a5fd2"
  },
  {
    title:"车辆胡乱停放",
    value:2,
    icon:"车",
    color:"#71cdb1"
  },
  {
    title:"红绿灯设计的原因",
    value:3,
    icon:"灯",
    color:"#fdf6ec"
  }
])
const ruleForm: any = ref({
  position: "",
  name: '',
  type: 0,
  time: new Date(),
  desc: ''
});
const rules = ref({
  position: [
    {required: true, message: '请先获取坐标'}
  ],
  name: [
    {required: true, message: '请输入名称', trigger: 'blur'}
  ],
  type: [
    {required: true, message: '请选择类型', trigger: 'change'}
  ],
  time: [
    {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
  ],
  desc: [
    {required: true, message: '请填写描述', trigger: 'blur'}
  ]
});
const refRuleForm: any = ref(null);
const centerDialogVisible = ref(false);
const sharpUrl:any = ref(location.href.replace(location.hash,"#/Share"));
function sharpOkBtn(){
  const input = document.createElement('input');
  document.body.appendChild(input);
  input.value = sharpUrl.value;
  input.select();
  if (document.execCommand('copy')) {
    document.execCommand('copy');
  }
  document.body.removeChild(input);
  ElMessage.success("分享地址已经复制成功,可以共享给你的好友");
}
function submitForm() {
  refRuleForm.value.validate((valid: any) => {
    if (valid) {
      setTimeout(() => {
        JsUtil.localStorageAddItem("TravelGuide", {data:ruleForm.value,typeAll:typeAll.value});
        ElMessage.success("数据发布成功!");
        resetForm();
        getData();
        centerDialogVisible.value = true;
      }, 1000)
    } else {
      return false;
    }
  });
}

function resetForm() {
  refRuleForm.value.resetFields();
  AMapUtil.removeDragMarker();
}

function getUserPosition() {
  AMapUtil.addDragMarker((res: any) => {
    ruleForm.value.position = [res.lnglat.lng, res.lnglat.lat];
  });
}

let placeSearchOverlayGroups: any = null;

function getData(isFitView: boolean = false) {
  removeData();
  // JsUtil.localStorageremoveItemAll("TravelGuide")
  const datas = JsUtil.localStorageGetItem("TravelGuide");
  const markers = datas.map((item: any) => {
    const data = item.data;
    const typeInfo = item.typeAll[item.data.type];
    const marker: any = new AMap.Marker({
      title: data.name,
      extData: item,
      position: data.position,
      content: `<div style="background-color: ${typeInfo.color};" class="parkicon">${typeInfo.icon}</div>`,
      offset: new AMap.Pixel(-15, -15)
    });
    marker.on("click", (ree: any) => {
      AMapUtil.createInfoWindow(TravelGuidInfoWindow, marker.getPosition(), item)
    })
    return marker;
  });
  placeSearchOverlayGroups = new AMap.OverlayGroup(markers);
  GlobalVariables.map.add(placeSearchOverlayGroups);
  if (isFitView) {
    GlobalVariables.map.setFitView(markers)
  }
}

function removeData() {
  if (placeSearchOverlayGroups) {
    GlobalVariables.map.remove(placeSearchOverlayGroups);
  }
}

AMapUtil.onMapLoaded(() => {
  AMapUtil.showTraffic();
  GlobalVariables.map.setZoomAndCenter(14, GlobalVariables.curPosition);
  getData(true);
})

onUnmounted(() => {
  AMapUtil.hideTraffic();
  AMapUtil.clearDriving();
  AMapUtil.removeDragMarker();
  removeData();
})
</script>

<style scoped lang="less">
.plan01 {
  position: fixed;
  top: 1rem;
  left: 1.05rem;
  width: 4rem;
  background-color: #304a4f;

  .form-box {
    padding: 0.2rem;
    box-sizing: border-box;
  }
}

.plan02 {
  position: fixed;
  top: 1rem;
  right: 0.2rem;
  background-color: #304a4f;

  .legend-box {
    padding: 0 0.1rem;
    display: flex;
    justify-content: center;

    .legend {
      display: flex;
      align-items: center;
      justify-content: center;

      ul {
        display: flex;
        align-items: center;
        padding: 0 0.1rem;

        li {
          width: 0.2rem;
          height: 0.05rem;
          background-color: #fff;
          border-radius: 0.01rem;
          margin: 0 0.01rem;
        }
      }
    }
  }
}
</style>
